<script>

import axios from 'axios';
import * as echarts from 'echarts';


    export default{
        data(){
            return{
                url:"http://39.106.84.74:8060/",
                text:"房价预测",
                citys: ["北京","上海","郑州","长沙","广州","重庆","哈尔滨","武汉"],
                districts : [],
                form:{
                    city:"北京",//城市
                    district:"",//地区
                    area:null,//房屋面积
                    direction:"",//朝向
                    decoration:"",//装修程度
                    elevator:""//电梯
                },
                price:null,
                totalPrice:null,
                chart:null,
            }
        },
        mounted(){
            this.getDistrict()
            if (echarts.getInstanceByDom(document.getElementById("chart")) == undefined){
                this.chart = echarts.init(document.getElementById("chart"));
            }
        },
        methods:{
            getDistrict(){
                axios.get(this.url+"getDistrict",{params:{
                "city":this.form.city
                }})
                .then( (response) => {
                    this.districts = response.data['district']
                })
            },
            analysis(){
                axios.get(this.url+"analysis",{params:this.form})
                .then( (response) => {
                    console.log(response.data)
                    this.price=response.data['price']
                    this.totalPrice=response.data['total_price']
                })
                
                axios.get(this.url+"yx",{params:{
                    "city":this.form.city,"influence":"地区"
                }}).then( (response) => {
                    this.chart.clear()
                    this.chart.setOption(response.data)
                } )
            }
        },
        created() {
            this.$watch(() => this.form.city,(newCity, oldCity) => {
                this.getDistrict()
            })
        }
    }
</script>
<template>
    <h1>{{ text }}</h1>
    <div class="container5">
        <div class="top">
            <div class="options">
                <el-select class="item" v-model="form.city" placeholder="选择城市" style="width: 150px">
                    <el-option v-for="city in this.citys" :value="city" :label="city"/>
                </el-select>
                <el-select class="item" v-model="form.district" placeholder="选择地区" style="width: 150px">
                    <el-option v-for="district in this.districts" :value="district" :label="district"/>
                </el-select>
                <el-input class="item" v-model="form.area" placeholder="房屋面积" type="number" style="width: 150px;"/>
                <el-input class="item" v-model="form.direction" placeholder="朝向" style="width: 150px;"/>
                <el-select class="item" v-model="form.decoration" placeholder="装修情况" style="width: 150px">
                    <el-option v-for="decoration in ['精装','简装','毛坯']" :value="decoration" :label="decoration"/>
                </el-select>
                <el-select class="item" v-model="form.elevator" placeholder="配备电梯" style="width: 150px">
                    <el-option v-for="elevator in ['有','无']" :value="elevator" :label="elevator"/>
                </el-select>
            </div>
            <div class="button">
                <el-button @click="this.analysis">预测</el-button>
            </div>
        </div>
        <div class="middle">
            <div v-if="this.price>0" class="statistic">
                <el-statistic :value="price" style="margin-right: 20px;">
                    <template #title>
                        <div style="display: inline-flex;align-items: center">
                            <el-tooltip effect="dark" content="线性回归模型根据爬取的1.7万条二手房源预测出目标房源的每平米价格" placement="top">
                                预测每平米价格
                            </el-tooltip>
                        </div>
                    </template>
                </el-statistic>
                <el-statistic :value="totalPrice">
                    <template #title>
                        <div style="display: inline-flex;align-items: center">
                            <el-tooltip effect="dark" content="预测价格*选定面积" placement="top">
                                预测总价
                            </el-tooltip>
                        </div>
                    </template>
                </el-statistic>
            </div>
            <div v-else>
                <h1>无符合条件的房源</h1>
            </div>
            <keep-alive>
                <div id="chart"></div>
            </keep-alive>
        </div>
    </div>
    
    
    
</template>
<style>
    .item{
        width: 150px;
        margin: 10px;
    }
    .container5{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        .top{
            width: 100%;
            height: 20%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
        }
        .middle{
            height: 80%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
    }
    .statistic{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 30px;
    }

    #chart{
        width: 80%;
        height: 80%;
    }
</style>